<template>
  <div class="article-page">
    <div class="article-item" v-for="item in articelList" :key="item.id" @click="goDetail(item.id)">
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">
        {{item.content}}
      </div>
      <div class="foot">点赞 {{item.likeCount}} | 浏览 {{item.views}}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ArticlePage',
  data () {
    return {
      articelList: []
    }
  },
  methods: {
    goDetail (id) {
      this.$router.push({
        name: 'ArticleDetail',
        params: {
          id
        }
      })
    }
  },
  async created () {
    const { data: { result: { rows } } } = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
    this.articelList = rows
  }
}
</script>

<style>
.article-page {
  background: #f5f5f5;
}

.article-item {
  background: #fff;
  margin-bottom: 10px;
  padding: 10px 15px;
  border-radius: 4px;
}

.head {
  display: flex;
  align-items: center;
}

.head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.con {
  flex-grow: 1;
}

.title {
  font-size: 18px;
  margin-bottom: 5px;
  color: #333;
}

.other {
  font-size: 12px;
  color: #666;
}

.body {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-top: 10px;
}

.foot {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.foot span {
  display: inline-block;
}
</style>
